<template>
  <section class="search">
    <HeaderTop title="搜索" />
    <form class="search_form" @submit.prevent="search">
      <input type="search" placeholder="请输入商家名称" class="search_input" v-model="keyword">
      <input type="submit" class="search_submit">
    </form>
    <section class="list" v-if="!noSearchShops">
      <ul class="list_container">
        <router-link :to="{ path: '/shop', query: { id: item.id } }" tag="li" v-for="item in searchShops" :key="item.id"
          class="list_li">
          <section class="item_left">
            <img :src="imgBaseUrl + item.image_path" class="restaurant_img">
          </section>
          <section class="item_right">
            <div class="item_right_text">
              <p><span>{{ item.name }}</span></p>
              <p>月售 {{ item.month_sales }} 单</p>
              <p>{{ item.delivery_fee }} 元起送 / 距离{{ item.distance }}</p>
            </div>
          </section>
        </router-link>
      </ul>
    </section>
    <div class="search_none" v-else>很抱歉！无搜索结果</div>
  </section>
</template>

<script>

import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
export default {
  data() {
    return {
      keyword: '',
      imgBaseUrl: 'http://cangdu.org:8001/img/',

      noSearchShops: false,
      localShops: [
        { id: 1, name: '大鸭梨烤鸭店', image_path: 'shop1.jpg', month_sales: 200, delivery_fee: 5, distance: '500m' },
        { id: 2, name: '大碗居家常菜', image_path: 'shop2.jpg', month_sales: 150, delivery_fee: 8, distance: '800m' },
        { id: 3, name: '大董烤鸭', image_path: 'shop3.jpg', month_sales: 300, delivery_fee: 10, distance: '1.2km' },
        { id: 4, name: '大龙燚火锅', image_path: 'shop4.jpg', month_sales: 180, delivery_fee: 6, distance: '700m' },
        { id: 5, name: '大渔铁板烧', image_path: 'shop5.jpg', month_sales: 250, delivery_fee: 15, distance: '1.5km' }
      ],
      searchShops: []
    }
  },



  methods: {
    search() {

      const keyword = this.keyword.trim()

      if (keyword) {

        this.searchShops = this.localShops.filter(shop =>
          shop.name.includes(keyword)
        )
        this.noSearchShops = this.searchShops.length === 0
      }
    }
  },









  components: {
    HeaderTop
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../common/stylus/mixins.styl"
  .search
    width 100%
    height 100%
    overflow auto
    .search_form
      clearFix()
      margin-top 45px
      background-color #fff
      padding 12px 8px
      input
        height 35px
        padding 0 4px
        border-radius 2px
        font-weight bold
        outline none
        &.search_input
          float left
          width 79%
          border 4px solid #f2f2f2
          font-size 14px
          color #333
          background-color #f2f2f2
        &.search_submit
          float right
          width 18%
          border 4px solid #02a774
          font-size 16px
          color #fff
          background-color #02a774

    .list
      .list_container
        background-color: #fff;
        .list_li
          display: flex;
          justify-content: center;
          padding: 10px
          border-bottom: 1px solid $bc;
          .item_left
            margin-right: 10px
            .restaurant_img
              width 50px
              height 50px
              display block
          .item_right
            font-size 12px
            flex 1
            .item_right_text
              p
                line-height 12px
                margin-bottom 6px
                &:last-child
                  margin-bottom 0
    .search_none
      margin: 0 auto
      color: #333
      background-color: #fff
      text-align: center
      margin-top: 0.125rem
</style>
